<template>
  <div class="main">
    <div class="liveShow box" style="margin-top: 2rem">
      
      <div class="liveShowLeft left">
        <p class="icon">直播</p>
        <p class="change">换一换</p>
        <p class="more">查看更多</p>
        <div class="liveBox" v-for="(item, index) in liveShow">
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="title_up">{{ item.title_up }}</p>
        </div>
      </div>

      <div class="liveShowRight right">
        <el-tabs type="border-card" stretch>
          <el-tab-pane label="直播排行">
            <ul>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon01.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>老实憨憨的笑笑</p>
                  <p class="jsGray">德云色 下棋主播推荐阵容上分</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon02.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩英雄联盟赛事</p>
                  <p class="jsGray">【预告】4日 15：00 WBG vs RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon03.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>longdd黄翔</p>
                  <p class="jsGray">开心每一天</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon04.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩王者荣耀赛事</p>
                  <p class="jsGray">【预告】4日 15：00 西安WBG vs 北京RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon05.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>凉哈皮</p>
                  <p class="jsGray">土蝗培训班</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon06.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>守护茶茶</p>
                  <p class="jsGray">《B站第一亚索》</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon07.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>咕噜咕噜oo</p>
                  <p class="jsGray">国服二带三车队 有车位秒上车</p>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="关注主播">
            <ul>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon02.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩英雄联盟赛事</p>
                  <p class="jsGray">【预告】4日 15：00 WBG vs RNG</p>
                </div>
              </li>

              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon05.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>凉哈皮</p>
                  <p class="jsGray">土蝗培训班</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon03.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>longdd黄翔</p>
                  <p class="jsGray">开心每一天</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon04.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩王者荣耀赛事</p>
                  <p class="jsGray">【预告】4日 15：00 西安WBG vs 北京RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon07.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>咕噜咕噜oo</p>
                  <p class="jsGray">国服二带三车队 有车位秒上车</p>
                </div>
              </li>

              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon06.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>守护茶茶</p>
                  <p class="jsGray">《B站第一亚索》</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/liveShow/leftIcon01.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>老实憨憨的笑笑</p>
                  <p class="jsGray">德云色 下棋主播推荐阵容上分</p>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="为你推荐">
            <div class="rightLiveBox" style="margin-bottom: 6.7rem">
              <img
                src="../../../public/images/Home/Content/fanju/01.webp"
                alt=""
              />
              <p class="title">2023PEL春季赛常规赛第四周</p>
              <p class="title_up">PEL和平精英职业联赛</p>
            </div>
            <div class="rightLiveBox" style="margin-bottom: 2rem">
              <img
                src="../../../public/images/Home/Content/fanju/03.webp"
                alt=""
              />
              <p class="title">2023PEL春季赛常规赛第四周</p>
              <p class="title_up">PEL和平精英职业联赛</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="fanju box">
      <div class="fanjuLeft left">
        <p class="icon">番剧</p>
        <p class="change">换一换</p>
        <p class="more">查看更多</p>
        <div class="liveBox" v-for="(item, index) in fanju">
          <img :src="item.img" alt="" />
          <p class="title">{{ item.title }}</p>
          <p class="title_up">{{ item.title_up }}</p>
        </div>
      </div>
      <div class="fanjuRight right">
        <el-tabs type="border-card" stretch>
          <el-tab-pane label="直播排行">
            <ul>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/09.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>老实憨憨的笑笑</p>
                  <p class="jsGray">德云色 下棋主播推荐阵容上分</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/08.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩英雄联盟赛事</p>
                  <p class="jsGray">【预告】4日 15：00 WBG vs RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/07.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>longdd黄翔</p>
                  <p class="jsGray">开心每一天</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/06.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩王者荣耀赛事</p>
                  <p class="jsGray">【预告】4日 15：00 西安WBG vs 北京RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/05.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>凉哈皮</p>
                  <p class="jsGray">土蝗培训班</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/04.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>守护茶茶</p>
                  <p class="jsGray">《B站第一亚索》</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/03.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>咕噜咕噜oo</p>
                  <p class="jsGray">国服二带三车队 有车位秒上车</p>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="关注主播">
            <ul>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/01.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>凉哈皮</p>
                  <p class="jsGray">土蝗培训班</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/07.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>咕噜咕噜oo</p>
                  <p class="jsGray">国服二带三车队 有车位秒上车</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/03.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>longdd黄翔</p>
                  <p class="jsGray">开心每一天</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/04.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩王者荣耀赛事</p>
                  <p class="jsGray">【预告】4日 15：00 西安WBG vs 北京RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/01.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>老实憨憨的笑笑</p>
                  <p class="jsGray">德云色 下棋主播推荐阵容上分</p>
                </div>
              </li>

              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/02.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>哔哩哔哩英雄联盟赛事</p>
                  <p class="jsGray">【预告】4日 15：00 WBG vs RNG</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <img
                    src="../../../public/images/Home/Content/fanju/06.webp"
                    alt=""
                  />
                </div>
                <div class="right">
                  <p>守护茶茶</p>
                  <p class="jsGray">《B站第一亚索》</p>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="为你推荐">
            <div class="rightLiveBox" style="margin-bottom: 6.7rem">
              <img
                src="../../../public/images/Home/Content/animation/01.webp"
                alt=""
              />
              <p class="title">2023PEL春季赛常规赛第四周</p>
              <p class="title_up">PEL和平精英职业联赛</p>
            </div>
            <div class="rightLiveBox" style="margin-bottom: 2rem">
              <img
                src="../../../public/images/Home/Content/animation/06.webp"
                alt=""
              />
              <p class="title">2023PEL春季赛常规赛第四周</p>
              <p class="title_up">PEL和平精英职业联赛</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="animation box">
      <div class="animationLeft left">
        <p class="icon">番剧</p>
        <p class="change">换一换</p>
        <p class="more">查看更多</p>
        <div class="liveBox" v-for="(item, index) in animation">
          <img :src="item.img" alt="" />
          <p
            class="title"
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ item.title }}
          </p>
          <p class="title_up">{{ item.title_up }}</p>
        </div>
      </div>
      <div class="animationRight right">
        <el-tabs type="border-card" stretch>
          <el-tab-pane label="直播排行">
            <ul style="line-height: 48px">
              <li>《崩坏3》动画短片「毕业旅行」</li>
              <li>【爆肝1000+张】流汗吧！原神少女</li>
              <li>因为她值得我这么做！</li>

              <li>按照观众描述画美少女2.0</li>
              <li>当 代 年 轻 人 现 状</li>
              <li>我是罕见电子宠物？！小爱正在出你户籍</li>
              <li>【CG概念短片】北京之下的尼伯龙根</li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="关注主播">
            <ul style="line-height: 48px">
              <li>因为她值得我这么做！</li>
              <li>《崩坏3》动画短片「毕业旅行」</li>
              <li>【CG概念短片】北京之下的尼伯龙根</li>
              <li>我是罕见电子宠物？！小爱正在出你户籍</li>
              <li>按照观众描述画美少女2.0</li>
              <li>【爆肝1000+张】流汗吧！原神少女</li>
              <li>当 代 年 轻 人 现 状</li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      liveShow: [
        {
          img: "../../../public/images/Home/Content/liveShow/01.webp",
          title: "2023PEL春季赛常规赛第四周",
          title_up: "PEL和平精英职业联赛",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/02.webp",
          title: "快进来聊天！！！←_←",
          title_up: "晓晓爱喝冰可乐",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/03.webp",
          title: "关注美少女免费深渊看号",
          title_up: "白椋Akubi",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/04.webp",
          title: "帮打深渊",
          title_up: "梁奕书",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/05.webp",
          title: "随便AA",
          title_up: "能玩就玩不玩滚",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/06.webp",
          title: "情人节专场，猫咪好物1元秒",
          title_up: "柿子菌meow",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/07.webp",
          title: "是你的温柔姐姐！！",
          title_up: "双眼皮肿了",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/08.webp",
          title: "王冕龙王 救赎扎克",
          title_up: "神探帅硫克",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/09.webp",
          title: "2023KPL第一视角5",
          title_up: "电竞赛事5",
        },
        {
          img: "../../../public/images/Home/Content/liveShow/10.webp",
          title: "深夜惊喜",
          title_up: "控欲男友-招主持",
        },
      ],
      animation: [
        {
          img: "../../../public/images/Home/Content/animation/01.webp",
          title: "别当欧尼酱了41：真寻干尴尬的一次“体检”，差点“晚节不保”!",
          title_up: "小萌酱说动漫· 2-28",
        },
        {
          img: "../../../public/images/Home/Content/animation/02.webp",
          title: "病娇姐姐の狂热暗恋？！up真的真的是演的！",
          title_up: "痛失网名的用户· 2-19",
        },
        {
          img: "../../../public/images/Home/Content/animation/03.webp",
          title: "找　　数　　字，暂停不算",
          title_up: "小貉普奇xiaohepuqi· 2-19",
        },
        {
          img: "../../../public/images/Home/Content/animation/04.webp",
          title: "【星穹铁道｜动画短篇】伪宣传CM--「梦幻之舟」",
          title_up: "姬海棠羽笠果· 昨天",
        },
        {
          img: "../../../public/images/Home/Content/animation/05.webp",
          title: "AB火柴人",
          title_up: "哈乃-HANE2· 1-10",
        },
        {
          img: "../../../public/images/Home/Content/animation/06.webp",
          title: "情人节专场，猫咪好物1元秒",
          title_up: "柿子菌meow",
        },
        {
          img: "../../../public/images/Home/Content/animation/07.webp",
          title: "新v首次叫醒舰长竟开始公然训狗?！【直播切片】",
          title_up: "小夜歌Sayoka· 2-26",
        },
        {
          img: "../../../public/images/Home/Content/animation/08.webp",
          title: "真·人 類 補 完 計 画",
          title_up: "雨尽时· 2-14",
        },
        {
          img: "../../../public/images/Home/Content/animation/09.webp",
          title: "【平成～令和】假面骑士相关道具 丝滑大集合",
          title_up: "酷KURURU· 昨天",
        },
        {
          img: "../../../public/images/Home/Content/animation/10.webp",
          title: "【原神手书】世界上另一个我",
          title_up: "愚人戏社· 2022-12-28",
        },
      ],
      fanju: [
        {
          img: "../../../public/images/Home/Content/fanju/01.webp",
          title: "反派大小姐莉泽洛特与实况解说",
          title_up: "更新至第9话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/02.webp",
          title: "阿鲁斯的巨兽！",
          title_up: "更新至第9话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/03.webp",
          title: "真・进化之实 踏上胜利的人生",
          title_up: "更新至第8话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/04.webp",
          title: "英雄传说：闪之轨迹",
          title_up: "更新至第2话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/05.webp",
          title: "妖怪手表",
          title_up: "更新至第39话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/06.webp",
          title: "间谍过家家 中配版",
          title_up: "更新至第14话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/07.webp",
          title: "大雪海的卡纳",
          title_up: "更新至第8话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/08.webp",
          title: "关于养猫我一直是新手",
          title_up: "更新至第27话~第28话",
        },
        {
          img: "../../../public/images/Home/Content/fanju/09.webp",
          title: "文豪野犬 第四季",
          title_up: "更新至第9话",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  .box {
    width: 90%;
    height: 55vh;
    margin: 4rem auto;
    display: flex;
    .left {
      width: 80%;
      height: 100%;
      display: inline-flex;
      align-content: space-around;
      justify-content: space-evenly;
      flex-wrap: wrap;
      position: relative;
      .icon {
        position: absolute;
        top: 0.2rem;
        left: 1rem;
        font-size: 1.5rem;
      }
      .change {
        position: absolute;
        top: 0.3rem;
        right: 7rem;
        font-size: 0.8rem;
        border: 1px solid rgb(206, 206, 206);
        border-radius: 5px;
        padding: 0.3rem 0.8rem;
      }
      .more {
        position: absolute;
        top: 0.3rem;
        right: 1rem;
        font-size: 0.8rem;
        border: 1px solid rgb(206, 206, 206);
        border-radius: 5px;
        padding: 0.3rem 0.8rem;
      }

      .liveBox {
        width: 260px;
        height: 180px;
        border-radius: 8px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
        .title {
          font-size: 0.85rem;
        }
        .title_up {
          margin-top: 5px;
          font-size: 0.8rem;
          color: gray;
        }
      }
    }
    .right {
      width: 20%;
      ul {
        width: 100%;
        li {
          width: 100%;
          list-style-type: decimal;
          height: 47px;
          margin: 1rem 0 0 0.8rem;

          .left {
            float: left;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .right {
            width: 230px;
            height: 45.5px;
            float: right;

            .jsGray {
              color: gray;
              font-size: 0.75rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
        li:nth-child(odd) {
          background-color: rgb(240, 240, 240);
        }
      }
    }
  }
}
.rightLiveBox {
  width: 260px;
  height: 175px;
  margin: -1rem auto;
  border-radius: 8px;
  img {
    width: 260px;
    height: 175px;
    border-radius: 8px;
  }
  .title {
    font-size: 0.85rem;
  }
  .title_up {
    margin-top: 5px;
    font-size: 0.7rem;
    color: gray;
  }
}
</style>
